<template>
	<view id="personalData">
		<view>
			<view class="homepageBackground">
				<image :src="userInformation.backimg || userInformation.headimg" mode="widthFix" />
				<view class="homepageBackground_title">
					<u-icon size="20" color="#fff" name="arrow-left" @click="fanhui"></u-icon>
					个人资料
				</view>
			</view>
			<view class="generous">
				<view class="card">
					<view class="card_top">
						<view class="card_top_left">	
							<!-- <text @click="popupShow=true">举报</text> -->
							<view>
								<text @click="showModal" v-if="userInformation.is_bad == 1">拉黑</text>
								<text @click="showModal" v-if="userInformation.is_bad == 2">已拉黑</text>
							</view>
							<view class="shoucang" @click="attention(1)">
								<u-icon name="star-fill" color="#fff" v-if="userInformation.is_collect == 1"></u-icon>
								<u-icon name="star-fill" color="red" v-if="userInformation.is_collect == 2"></u-icon>  
							</view>
						</view>
						<view class="sixinAndShouCang">

							<view class="sixin" @click="privateMessages(userInformation)">
								<u-icon size="14" label-size="10" name="chat-fill" color="#f36b07" label="私信TA"
									label-color="#f36b07"></u-icon>
							</view>
						</view>
					</view>
					<view class="card_cards">
						<view class="card_headImg">
							<u-avatar size="50" :src="userInformation.headimg"></u-avatar>
						</view>
						<view class="card_content">
							<view style="font-size: 36rpx; margin-top: 40rpx;">{{userInformation.nickname}}</view>
							<view style="color: #a2a2a2; margin: 10rpx 0; " v-if="userInformation.base_sex">性别: {{userInformation.base_sex==1 ? '男':'女'}}</view>
							<view style="color: #a2a2a2; margin: 10rpx 0;" v-if="userInformation.base_birthday">生日: {{userInformation.base_birthday}}</view>
							<view class="ClerkBetween">
								<view class="ClerkCharacter">
									<view v-for="item in userInformation.lables" :key="item">
										{{item}}
									</view>
								</view>
							</view>
							
							<view style="line-height: 1.5; margin: 20rpx;">{{userInformation.readme}}</view>
						</view>
					</view>
				</view>
				<view class="subsectionType">
					<u-tabs :list="list" @click="sectionChange" :current="curNow"></u-tabs>
					<!-- <u-subsection :list="list" @change="sectionChange" mode="subsection" :current="curNow"></u-subsection> -->
				</view>
				<homePage :userId="Number(userId)" v-if="curNow==0"></homePage>
				<dynamic :userId="Number(userId)" v-if="curNow==1"></dynamic>
				<PaidLists :userId="Number(userId)" v-if="curNow==2"></PaidLists>
				<!-- <shop :userId="Number(userId)" v-if="curNow==3"></shop> -->
				<!-- 拉黑对话框 -->
				<u-modal :show="BlockShow" @cancel="cancel" @confirm="confirm" :showCancelButton="true"
					:title="BlockTitle" :content='content'></u-modal>
			</view>

			<!-- 举报该用户 -->
			<!-- <u-popup :show="popupShow" mode="center" width="500" height="700" @close="close" @open="open">
				<view class="popup" @click="showReportClick(item)" v-for="(item,index) in reportList">{{item.title}}
				</view>
			</u-popup> -->
			<!--  -->
			<!-- <u-popup :show="showReport" mode="center" width="800" height="600">
				<view class="titleReport">
					<u-icon @click="showReport=false" name="close" label="举报" style="width: 100rpx;"></u-icon>
				</view>
				<view class="textReport">
					<textarea placeholder="请填写具体理由" @focus="handleFocus" @blur="handleBlur"></textarea>
				</view>
				<view class="buttomReport">
					<button>提交</button>
				</view>
			</u-popup> -->
			<!-- 私信提示框 -->

		</view>
		<view style="height: 100rpx;"></view>
		<!-- <view>
			<payService :payService="userInformation"></payService>
		</view> -->
	</view>
</template>

<script>
	import homePage from '@/components/Segmenter/homePage.vue';
	import dynamic from '@/components/Segmenter/dynamic.vue';
	import PaidLists from '@/components/Segmenter/PaidLists.vue';
	import shop from '@/components/Segmenter/shop.vue';
	import payService from '@/components/payServie/payService.vue'

	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"

	export default {
		components: {
			homePage,
			dynamic,
			PaidLists,
			shop,
			payService

		},

		data() {
			return {
				userInformation: {},

				userId: "", //点进进来后获取被点击用户的id
				loveFlag: false, //是否收藏
				// 可删除
				src: "https://pnglog.com/Fo1L9H.jpg",
				popupShow: false, //举报对话框
				showReport: false, //举报理由
				BlockShow: false, //拉黑
				BlockTitle: '', //拉黑对话框
				content: '', //拉黑对话框内容
				show: false, //消息提示框(私信)
				reportList: [],
				user: [],

				// 或者如下，也可以配置keyName参数修改对象键名,
				list: [{
					name: '主页'
				}, {
					name: '动态'
				}, {
					name: '付费榜'
				}],

				curNow: 1,
			}
		},
		computed: {
			...mapState('user', ['userInfo'])
		},
		onLoad(option) {
			console.log(option,'option')
			this.userId = option.id;
			this.getUserInfos()
		},
		methods: {
			...mapActions('user', ['getUserInfo', 'getMessageTouser']),
			...mapMutations('user', ['getMessageTouser']),
			getUserInfos() {
				this.$api.getUserInfos({
					uuid: this.userId
				}).then(res => {
					this.userInformation = res.data
				})
			},
			attention(type) {

				this.$api.CollectionBlackout({ //关注页面
					creators_id: this.userInformation.id,
					type: type
				}).then(res => {
					if (res.code == 1) {
						uni.showToast({
							title: res.info,
							icon: "none"
						})
						this.getUserInfos()
					}
				})

			},
			privateMessages(item) { //私信
				if (this.userInformation.is_collect == 1) return uni.$u.toast('需要收藏对方才可以发布私信')
				this.getMessageTouser(item)
				uni.navigateTo({
					url: "/pages/content/privateChat/privateChat"
				})

			},
			sectionChange(item) { //分段器
				this.curNow = item.index;
			},
			fanhui() {
				uni.switchTab({
					url: "/pages/tabBarHome/home"
				})
			},

			showModal(index) {
				console.log('index', index)
				this.BlockShow = true;
				this.BlockTitle = '确认加入拒绝名单吗？';
				this.content = '无法再次想你发电。无法想你点赞、评论、私信。从你的电圈中移除该成员，并无法加入。TA在发电有效期内仍可以查看你的付费内容如需要取消权益，请联系管理员'

			},
			// 拉黑对话框
			confirm() {
				this.BlockShow = false
				this.attention(2)
			},
			cancel() {
				this.BlockShow = false

			},
			// 举报对话框
			open() {
				// console.log('open');
			},
			close() {
				this.popupShow = false
				// console.log('close');
			},
			showReportClick(item) {
				this.popupShow = false;
				this.title = item.title;
				this.showReport = true;
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f8f8f8;
	}

	
	
	.titleReport {
		width: 90%;
		margin: auto;
		height: 60rpx;
		display: flex;
		// border: 1rpx red solid;
	}

	.textReport {
		width: 100%;

		textarea {
			border: 2rpx #e3e3e3 solid;
		}
	}

	.popup {
		padding: 20rpx;
	}

	#personalData {
		width: 100%;
		background: #f8f8f8;
	}

	.homepageBackground {
		// border: 1rpx solid red;
		// width: 100%;

		// image {
		// 	width: 100%;
		// 	display: block;
		// }
		width: 100%;
		height: 70vw;
		/* 通过设置高度为宽度的25%来实现4:1的比例 */
		position: relative;
		/* 为了让内部的image相对定位 */
		overflow: hidden;
		/* 隐藏超出容器的部分 */

		image {
			width: 100%;
			height: auto;
			/* 保持图像的宽高比 */
			position: absolute;
			/* 绝对定位以覆盖整个容器 */
			top: 50%;
			/* 垂直居中 */
			left: 50%;
			/* 水平居中 */
			transform: translate(-50%, -50%);
			/* 调整偏移，使图像中心对齐 */
		}

		.homepageBackground_title {
			width: 49%;
			position: absolute;
			top: 44px;
			left: 8%;
			color: #fff;
			display: flex;
			justify-content: space-between;
		}
	}

	.generous {
		position: absolute;
		top: 280rpx;
		width: 100%;

		.card {
			width: 100%;
			// border: 2rpx red solid;
			font-size: 24rpx;


			.card_top {
				width: 90%;
				height: 100rpx;
				margin: auto;
				display: flex;
				justify-content: space-between;
				align-items: center;
				color: #fff;

				.card_top_left {
					width: 25%;
					display: flex;
					justify-content: space-around;
					// color: #fff;

				}

				.sixinAndShouCang {
					display: flex;
					flex-direction: column;
					align-items: center;

					.shoucang {
						height: 40rpx;
					}

					.sixin {
						background-color: #fffffd; //
						padding: 10rpx;
						border-radius: 100rpx;
						margin-bottom: 40rpx;
					}
				}
			}
			.card_cards {
				display: flex;
				flex-direction: column;
				align-items: center;
				width: 90%;
				margin: auto;
				border-radius: 20rpx;
				background: #fff;
				box-shadow: 1px 0px 20px 0px rgba(0, 0, 0, 0.17);

				.card_headImg {
					position: absolute;
					top: 20rpx;

					image {
						box-shadow: 1px 0px 20px 0px rgba(0, 0, 0, 0.17);

					}
				}

				.card_content {
					display: flex;
					flex-direction: column;
					align-items: center;
					border-radius: 20rpx;



					// view {
					// 	line-height: 2.5;
					// }

					// .card_tag {
					// 	display: flex;
					// 	flex-wrap: wrap;


					// 	view {
					// 		width: 154rpx;
					// 	}
					// }
					.ClerkBetween {
						display: grid;
						place-items: center;
						margin: 0 25rpx;
						.ClerkCharacter {
							display: flex;
							flex-wrap: wrap;
					
							view {
								width: 150rpx;
								height: 36rpx;
								line-height: 36rpx;
								background: linear-gradient(to right, #FFB3B3 0%, #FFC9C9 100%);
								border-radius: 40rpx;
								font-size: 24rpx;
								color: #FFFFFF;
								text-align: center;
								margin-right: 8rpx;
								margin-top: 8rpx;
							}
					
						 }
						}
				}
			}
		}

		.subsectionType {
			// width: 90%;
			background-color: #fff;
			margin: 30rpx;
		}
	}
</style>